<template>
	<u-sticky>
		<view class="po_fiexd" :style="{top: top}">
			<view class="flex justify-between align-center padding_l_r30">
				<image class="logo" :src="imgUrl" mode=""></image>
				<!-- <view class="login flex justify-center align-center">
					登录
				</view> -->
			</view>
		</view>
	</u-sticky>
	<!-- 获取等高高度防止塌陷 -->
	<view v-if="safeAreaInsetTop" :style="{height: swiperHeight}"></view>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance,
		onMounted
	} from 'vue';

	const prpos = defineProps({
		safeAreaInsetTop: {
			type: Boolean,
			default: false
		},
		imgUrl: {
			type: String,
			default: '/static/image/logo/logo.png'
		},
		top: {
			type: String,
			default: 'calc(44rpx)'
		}
	})
	onMounted(() => {
		swiperChange();
	})

	// 获取组件实例
	const swiperHeight = ref(0);
	const instance = getCurrentInstance();
	const swiperChange = (e) => {
		let className = ".po_fiexd"
		// 查询节点信息的对象，获取节点高度
		const query = uni.createSelectorQuery().in(instance);
		query.select(className).boundingClientRect(data => {
			swiperHeight.value = data.height + 'px'
		}).exec();
	}
</script>

<style lang="scss" scoped>
	.po_fiexd {
		width: 100%;
		position: absolute;
		// top: calc(44rpx + var(--status-bar-height));

		.logo {
			width: 182rpx;
			height: 66rpx;
		}

		.login {
			width: 120rpx;
			height: 60rpx;
			font-size: 28rpx;
			border-radius: 40rpx;
			background: #FAE9E1;
		}
	}
</style>
